<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>postgresql脚本</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
     * {
            margin: 0;
            padding: 0
        }

        html,
        body {
            height: 100%
        }
        .title {
            text-align: center;
            background: #B3C0D1;
            color: #f0ffff;
            line-height: 4rem;
        }
        .el-header,
        .el-footer {
            background-color: #B3C0D1;
            color: #333;
            /* text-align: center; */
            line-height: 60px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }

        body>.el-container {
            margin-bottom: 40px;
        }
</style>
<body>
    <div id="app" style="height: 100%;">

        <el-container style="height: 100%;">
            <h1 class="title">postgresql脚本</h1>
            <el-header>
                <div>
                    <el-input style="width:50%" placeholder="请输入数据库路径 eg: postgres:herin123@192.168.0.12:5432/police" v-model.trim="jdbc" >
                        <template slot="prepend">{{jdbcUrlPrefix}}</template>
                    </el-input>
                    <el-button @click="testConnection" type="primary" icon="el-icon-refresh">测试连接</el-button>
                </div>
            </el-header>
            <el-main>
                <div>
                    <el-input v-model="tableName" placeholder="请输入表名"></el-input>
                    
                    
                    <el-select v-model="precision" placeholder="请选择精度">
                        <el-option
                          v-for="item in precisionList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          >
                        </el-option>
                    </el-select>
                    <el-input-number v-model="dataCounts" @change="handleChange" :min="1" :max="1000" label="生成的数量"></el-input-number>
                    <el-button @click="generateData" type="primary" icon="el-icon-refresh">生成数据</el-button>
                </div>
                



                <template>
                    <!-- <el-table :data="tableData" height="100%" border style="width: 100%">
                        <el-table-column prop="nickName" label="昵称" width="180">
                        </el-table-column>
                        <el-table-column prop="oid" label="用户oid" width="180">
                        </el-table-column>
                        <el-table-column prop="buttonList" label="测试功能">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(1,scope.row)" type="text" size="small">重置用户</el-button>
                                <el-button @click="handleClick(2,scope.row)" type="text" size="small">修改提示道具个数</el-button>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table> -->
                </template>

                <!-- <el-dialog title="警告！此操作将会清空数据库信息！" :visible.sync="dropDialogVisible" width="30%">
                    <el-input placeholder="请输入密码" v-model="dropDataInput" show-password></el-input>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dropDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dropData">确 定</el-button>
                    </span>
                </el-dialog> -->
            </el-main>
        </el-container>
    </div>
</body>
</html>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/elementui.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            // 常量
            SERVER: 'http://localhost:3000',
            //数据库连接地址前缀
            jdbcUrlPrefix: 'postgres://',
            //数据库连接地址
            jdbc: 'postgres:herin123@localhost:5432/postgres',
            //表名
            tableName: '',
            //生成的数量
            dataCounts: 200,
            //精度
            precision: 6,
            //精度列表
            precisionList: [
                {value: 5, label: '精度5'},
                {value: 6, label: '精度6'},
                {value: 7, label: '精度7'}
            ]
        },
        computed: {
            jdbcUrl: function(){
                return this.jdbcUrlPrefix + this.jdbc;
            }
        },
        methods: {
            //测试连接
            async testConnection(){
                if (!this.jdbcUrl) {
                    this.$message({
                        message: '路径不能为空',
                        type: 'warning'
                    });
                    return;
                }
                let res = await axios.post(`${this.SERVER}/pg/ping`, {jdbcUrl: this.jdbcUrl}).then(e => e.status === 200 ? e.data : e.statusText);
                if(res.success) {
                    this.$message.success('成功ping通！');
                } else {
                    this.$message.error('连接数据库出错，请重新检查！');
                }
            },
            //生成数据
            async generateData(){

            },
            handleChange(value) {
                console.log(value);
            }
        }
    })
</script>